<template>
	<view class="content">
		<view class="text-box">
			<u-image width="320rpx" height="320rpx" :src='img[payType]'></u-image>
			<view style="
				padding-top: 40rpx;
			">
				<view class="pay-body">
					<view class="">
						<view class="pay-type pay-success-color" style="text-align: center;">
							{{payType=='success'?'支付成功':'支付失败'}}
						</view>
						<!--  #ifdef MP-WEIXIN || MP-ALIPAY -->
						<view style="padding-top: 36rpx;">
							<!-- <u-button type="error" @click="onExitMiniProgram">关闭小程序</u-button> -->
							<view class="confirm-btn" @click="onExitMiniProgram">
								关闭小程序
							</view>
						</view>
						<!--  #endif -->
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<foot-box></foot-box>
		</view>
		<!-- <u-image width="300rpx" height="300rpx" :src="src[0]"></u-image> -->
	</view>
</template>

<script setup name='AfterPay'>
	import {
		reactive,
		toRefs,
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import footBox from '@/components/foot-box/index.vue'
	import {
		roundAndPad
	} from '@/common/common.js'
	import {
		useCommonStore
	} from '@/stores/common.js'
	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const title = computed(() => commonStore.merchantInfo.merchantName)
	const sum = ref('2000')
	const payMap = ref({
		weixin: '微信',
		alipay: '支付宝',
		yinlian: '银联',
	})
	const img = ref({
		'success': `/static/images/success.svg`,
		'err': `/static/images/err.svg`,
	})

	const payType = ref('success')

	onLoad((option) => {
		if (option.type) {
			payType.value = option.type
		}
	})

	function getSum() {
		return roundAndPad(sum.value, 2)
	}

	function onExitMiniProgram() {
		uni.exitMiniProgram({
			success: () => {
				console.log('成功退出小程序');
			},
			fail: (err) => {
				console.error('退出失败：', err);
			}
		});
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		height: 90vh;
	}

	.text-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
	}

	.sum {
		font-size: 64rpx;
		font-weight: 700;
	}

	.confirm-btn {
		border-color: var(--maiColor);
		background-color: var(--maiColor);
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		padding: 28rpx;
		width: 90vw;
	}

	.trade-info {
		padding-top: 20rpx;
		width: 60%;
		line-height: 42rpx;
		margin: auto;
		text-align: left;
	}

	.pay-success-color {
		color: var(--maiColor);
	}

	.pay-body {
		display: flex;
		align-items: center;
	}

	.pay-icon {
		padding-right: 20rpx;
	}

	.pay-type {
		font-size: 36rpx;
		font-weight: 700;
	}

	.foot {
		padding-top: 80rpx;
	}
</style>